import { _decorator, Color, Component, Gradient, Graphics, math, misc, Node, v2, Vec2 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('referenceScript')
export class referenceScript extends Component {


    protected onLoad(): void {
        this.node.addComponent(Graphics);
    }

    start() {

        // const g = this.
        // g.lineWidth = 10;
        // // g.fillColor.fromHEX('#ff0000');
        // g.moveTo(-40, 0);
        // g.lineTo(0, -80);
        // g.lineTo(40, 0);
        // g.lineTo(0, 80);
        // g.close();
        // g.stroke();
        // g.fill();

        this.drawDottedCircle()


    }

    drawDottedCircle() {

        const ctx = this.node.getComponent(Graphics);
        if (!ctx) {
            return;
        }
        // 设置虚线的属性
        ctx.lineWidth = 20;
        ctx.strokeColor = Color.WHITE;

        const spaceLength = 20;  // 虚线间隔
        const lineLength = 30;   // 每段虚线的长度

        const width = 500;   // 长方形的宽度
        const height = 800;  // 长方形的高度
        

        // 直接使用长方形的四个顶点
        const position1 = v2(0,0); // 长方形的左上角点
        const position2 = v2(1240,0);  // 长方形的右上角点
        const position3 = v2(1240,225); // 长方形的左下角点
        const position4 = v2(0,225); // 长方形的右下角点
        // const position5 = v2(280,0); // 长方形的右下角点

        // 顶点数组
        let vertices = [position1, position2, position3, position4];
        
        vertices = this.getOffect(vertices);

        const length = vertices.length
        for (let i = 0; i < length; i++) {
            const start = vertices[i];
            const end = vertices[(i + 1) % length]; // 连接最后一个点与第一个点

            let x = start.x;
            let y = start.y;

            // 绘制每条边的虚线
            while (true) {
                const dx = end.x - x;
                const dy = end.y - y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance <= lineLength) {
                    // 如果剩余的距离小于或等于线段长度，直接绘制剩余部分
                    ctx.moveTo(x, y);
                    ctx.lineTo(end.x, end.y);
                    ctx.stroke();
                    break;
                }

                // 计算下一段虚线的终点
                const stepX = (dx / distance) * (lineLength);
                const stepY = (dy / distance) * (lineLength);

                // 绘制虚线段
                ctx.moveTo(x, y); // 设置起点
                x += stepX;
                y += stepY;
                ctx.lineTo(x, y); // 绘制到下一点
                ctx.stroke();

                // 跳过间隔
                x += (dx / distance) * spaceLength;
                y += (dy / distance) * spaceLength;
            }
        }

    }


    //计算几何图形的中心位置
    getCenter(vertices: math.Vec2[]): Vec2 {
        let sumX = 0, sumY = 0;
        const numVertices = vertices.length;
    
        // 遍历所有顶点，计算坐标的总和
        vertices.forEach(vertex => {
            sumX += vertex.x;
            sumY += vertex.y;
        });
    
        // 返回中心点的坐标
        return new Vec2(sumX / numVertices,sumY / numVertices)
    }


    //计算平移量并返回平移后的坐标
    getOffect(vertices: math.Vec2[]):math.Vec2[]{
        //获取中心点坐标
        let centerVec2 = this.getCenter(vertices);
        let newvertices = vertices
        for (let i = 0; i < vertices.length; i++) {
            newvertices[i].x = vertices[i].x - centerVec2.x
            newvertices[i].y = vertices[i].y - centerVec2.y
        }

        return newvertices

    }
    


    update(deltaTime: number) {

    }
}


